<%--
  Created by IntelliJ IDEA.
  User: Liubuzhu
  Date: 2023/12/3
  Time: ฅ(΅•ㅅ•΅❀)ฅ 13:57
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>开发商管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="../../js/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <el-container>
    <el-aside width="200px" height="100%">
      <el-menu :default-active="activeMenu" @select="handleMenuSelect" >
        <el-submenu index="sub1">
          <template slot="title">FunPlay游戏商店管理管理</template>
          <el-menu-item index="admin">管理员管理</el-menu-item>
          <el-menu-item index="developer">游戏开发商管理</el-menu-item>
          <el-menu-item index="player">玩家管理</el-menu-item>
          <el-menu-item index="game">游戏管理</el-menu-item>
          <el-menu-item index="library">游戏库管理</el-menu-item>
          <el-menu-item index="category">游戏分类管理</el-menu-item>
          <el-menu-item index="comment">游戏评论管理</el-menu-item>
          <el-menu-item index="order">订单管理</el-menu-item>
          <el-menu-item index="tubiao">销售图表</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-main>
        <div>
          <h1>管理员管理</h1>
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
          </el-row>
          <el-table :data="developers" style="width: 100%">
            <el-table-column label="开发商编号" align="center" prop="developerId"></el-table-column>
            <el-table-column label="开发商名称" align="center" prop="developerName"></el-table-column>
            <el-table-column label="开发商地址" align="center" prop="developerAddress"></el-table-column>
            <el-table-column label="账号" align="center" prop="developerUsername"></el-table-column>
            <el-table-column label="联系方式" align="center" prop="developerContact"></el-table-column>
            <el-table-column label="邮箱" align="center" prop="developerEmail"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="110px">
              <el-form-item label="开发商名称" prop="developerName">
                <el-input v-model="form.developerName" placeholder="请输入开发商名称"></el-input>
              </el-form-item>
              <el-form-item label="开发商地址" prop="developerAddress">
                <el-input v-model="form.developerAddress" placeholder="请输入开发商地址" />
              </el-form-item>
              <el-form-item label="账号" prop="developerUsername">
                <el-input v-model="form.developerUsername" placeholder="请输入账号" />
              </el-form-item>
              <el-form-item label="联系方式" prop="developerContact">
                <el-input v-model="form.developerContact" placeholder="请输入联系方式" />
              </el-form-item>
              <el-form-item label="邮箱" prop="developerEmail">
                <el-input v-model="form.developerEmail" placeholder="请输入邮箱" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </el-dialog>

        </div>
      </el-main>
    </el-container>
  </el-container>
</div>
<script>
  // 创建 Vue 实例
  new Vue({
    el: '#app',
    data: {
      activeMenu: 'developer',  // 默认选中的菜单项
      developers: [],
      open: false,
      title: "",
      form: {},
      rules: {},
    },
    created() {
      // 创建时
      this.getDeveloperList();
    },
    methods: {
      // 提交
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.developerId != null) {
              axios.post('http://localhost:8080/funplay_war/developer', {
                action: 'update',
                developerId: this.form.developerId,
                developerName: this.form.developerName,
                developerAddress: this.form.developerAddress,
                developerEmail: this.form.developerEmail,
                developerContact: this.form.developerContact,
                developerUsername: this.form.developerUsername
              }, {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                }
              })
                      .then(response => {
                        this.msgSuccess("修改成功");
                        this.open = false;
                        this.getAdminList();
                      })
                      .catch(error => {
                        console.error('修改失败:', error);
                      });
            } else {
              axios.post('http://localhost:8080/funplay_war/developer', {
                action: 'add',
                developerId: this.form.developerId,
                developerName: this.form.developerName,
                developerAddress: this.form.developerAddress,
                developerEmail: this.form.developerEmail,
                developerContact: this.form.developerContact,
                developerUsername: this.form.developerUsername
              }, {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                }
              })
                      .then(response => {
                        this.msgSuccess("新增成功");
                        this.open = false;
                        this.getDeveloperList();
                      })
                      .catch(error => {
                        console.error('新增失败:', error);
                      });
            }
          }
        });
      },
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          developerId: null,
          developerName: null,
          developerAddress: null,
          developerUsername: null,
          developerContact: null,
          developerEmail: null,
        };
      },
      // 修改按钮
      handleUpdate(row) {
        this.reset();
        const developerId = row.developerId;
        console.log(developerId);
        axios.get('http://localhost:8080/funplay_war/developer', { params: { action: 'getById', developerId: developerId } })
                .then(response => {
                  this.form = response.data;
                  this.open = true;
                  this.title = "修改开发商信息";
                });
      },
      // 删除按钮
      handleDelete(row) {
        // 删除开发商
        this.$confirm('是否确认删除开发商编号为"' + row.developerId + '"的数据？', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return axios.post('http://localhost:8080/funplay_war/developer', {
            action: 'delete',
            developerId: row.developerId
          }, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          });
        }).then(() => {
          this.getDeveloperList();
          this.msgSuccess("删除成功");
        })
      },
      // 添加按钮
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加开发商信息";
      },
      getDeveloperList() {
        // 使用 Axios 发送 GET 请求获取管理员数据
        axios.get('http://localhost:8080/funplay_war/developer', { params: { action: 'getAll' } })
                .then(response => {
                  // 请求成功，将数据赋值给developers
                  console.log(JSON.stringify(response.data));
                  this.developers = response.data;
                })
                .catch(error => {
                  // 请求失败
                  console.error('请求开发商数据失败:', error);
                });
      },
      // 处理菜单选择事件
      handleMenuSelect(index) {
        // 根据选择的菜单项动态加载组件
        switch (index) {
          case 'admin':
            window.location.href = "adminManage.jsp";
            break;
          case 'developer':
            window.location.href = "developerManage.jsp";
            break;
          case 'player':
            window.location.href = "playerManage.jsp";
            break;
          case 'game':
            window.location.href = "gameManage.jsp";
            break;
          case 'gameComment':
            window.location.href = "gameCommentManage.jsp";
            break;
          case 'category':
            window.location.href = "gameCategoryManage.jsp";
            break;
          case 'playerGameLibrary':
            window.location.href = "playerGameLibraryManage.jsp";
            break;
          case 'purchaseRecord':
            window.location.href = "purchaseRecordManage.jsp";
            break;
          case 'saleReport':
            window.location.href = "saleReport.jsp";
            break;
          default:
            break;
        }
      },
    },
  });
</script>
</body>
</html>

